<!--
 * @Description:  第十九章（Teleport传送组件）
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-16 21:18:40
-->
<template>
  <div>
    <p>第十九章（Teleport传送组件）</p>
    <div class="parent">
      <h1>我是父级</h1>
      <Teleport :disabled="false" to="body">
        <A></A>
      </Teleport>
    </div>
  </div>
</template>
<script setup lang="ts">
/*
Teleport Vue 3.0新特性之一。
Teleport 是一种能够将我们的模板渲染至指定DOM节点，不受父级style、v-show等属性影响，但data、prop数据依旧能够共用的技术；类似于 React 的 Portal。
主要解决的问题 因为Teleport节点挂载在其他指定的DOM节点下，完全不受父级style样式影响
*/

import A from '@/components/19th/A.vue'
</script>
<style scoped lang="less">
* {
  padding: 0;
  margin: 0;
}

.parent {
  background: yellow;
  height: 50vh;
  position: relative;
}
</style>
